@extends('layouts.app')

@section('content')
    <div class="container">
        每页记录
        <select name="" id="per_page_count">
            <option value="1" @if($contacts->perPage()==1) selected @endif>1</option>
            <option value="5" @if($contacts->perPage()==5) selected @endif>5</option>
            <option value="10" @if($contacts->perPage()==10) selected @endif>10</option>
            <option value="20" @if($contacts->perPage()==20) selected @endif>20</option>
        </select>
        条
        <input type="text" placeholder="按姓名查找" id="s_name" value="{{$s_name}}">
        <button class="btn btn-search">搜索</button>
        <button class="btn btn-clear">清除</button>
        <a href="/contacts/add" class="btn btn-primary">新增联系人</a>
        <div class="panel contact-list-panel">
            <div class="panel-title">
                联系人列表
            </div>
            <div class="panel-body">
                <table class="table">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>出生日期</th>
                            <th>电邮</th>
                            <th>手机</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($contacts as $c)
                            <tr>
                                <td>{{$c->id}}</td>
                                <td><a href="/contacts/{{$c->id}}">{{$c->name}}</a></td>
                                <td>{{$c->gender}}</td>
                                <td>{{$c->birth_date}}</td>
                                <td>{{$c->email}}</td>
                                <td>{{$c->mobile_phone}}</td>
                                <td>
                                    <a class="btn btn-info" href="/contacts/modify/{{$c->id}}">修改</a>
                                    <a class="btn btn-danger btn-delete" href="/contacts/delete/{{$c->id}}">删除</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            {{ $contacts->links() }}
            共 {{$contacts->total()}} 条数据 每页 {{ $contacts->perPage() }} 条数据

        </div>
    </div>

@endsection

@section("foot-js")
    <script>
        $(function(){
            $(".contact-list-panel .page-link").on("click",function(e){
                //alert("Clicked");
                e.preventDefault();
                console.log(e);
                var url = e.target.href;
                if(url===undefined) return;
                location.href = url + "&per_page=" + $("#per_page_count").val() + '&s_name=' + $("#s_name").val();
            });
            $("#per_page_count").on("change",function(){
                location.href = location.origin + location.pathname + "?page=1&per_page="+$(this).val() + '&s_name=' + $("#s_name").val();
            });

            $("#s_name").on("keyup",function(e){
                console.log(e);
                if(e.key==="Enter" || (e.key==="Backspace" && $(this).val()==="")){
                    location.href = location.origin + location.pathname + "?page=1&per_page="+$("#per_page_count").val() + '&s_name=' + $("#s_name").val();
                }
            });
            $(".btn-search").click(function(e){
                location.href = location.origin +  location.pathname + "?page=1&per_page="+$("#per_page_count").val() + '&s_name=' + $("#s_name").val();
            });
            $(".btn-clear").click(function(){
                $("#s_name").val("");
                location.href = location.origin +  location.pathname + "?page=1&per_page="+$("#per_page_count").val() + '&s_name=' + $("#s_name").val();
            });
            $(".btn-delete").on("click",function(e){
                e.preventDefault();
                var result = confirm("您真的要删除吗？");
                if(result){
                    location.href = $(this).attr('href');
                }
            });
        });
    </script>
@endsection